<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任务审核</title>
</head>
<body>
<div th:fragment="main" id="handle" class="handle">
    <link rel="stylesheet" th:href="@{/assets/viewer/viewer.css}">
    <link rel="stylesheet" th:href="@{/assets/jquery.eeyellow.Timeline/jquery.eeyellow.Timeline.css}">
    <link rel="stylesheet" th:href="@{/css/assignmentGroup/handle.css}">
    <div class="pending_content">
        <!-- 导航栏 -->
        <div class="title clearfix">
            <ol class="breadcrumb title-content pull-left">
                <li><a href="#qualitycontrol-assignmentGroup-pending">任务管理</a></li>
                <li>任务处理</li>
            </ol>
            <a class="btn btn-primary goback" href="#qualitycontrol-assignmentGroup-pending">
                <span>«</span>
                返回
            </a>
        </div>
        <!-- 内容 -->
        <div class="contents">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#basic" aria-controls="basic" role="tab" data-toggle="tab">基本信息</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">流程信息</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="basic">
                    <div id="basicInformation" class="basic-information">
                        <!-- 基本信息 -->
                    </div>
                    <!-- 示例图片 -->
                    <div class="ibox">
                        <div class="ibox-title example" id="showImage">
                            <span></span>
                            <h5>示例图片</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-down" id="fa"></i>
                                </a>
                            </div>
                        </div>
                        <div class="sample-pictures" id="samplePictures">
                            <div class="carousel slide" id="carousel3">
                                <div class="pictures" id="pictures">
                                    <ul id="samplePictureList" class="clearfix">
                                        <!-- 示例图片 -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 任务图片 -->
                    <div class="ibox">
                        <div class="ibox-title examine" id="showImage">
                            <span></span>
                            <h5>任务图片</h5>
                            <a type="text" onclick="appFile()"  id="uploadIco" class="uploadIco " >上传任务图片</a>
                            <div id = number>

                            </div>
                            <input id="fileupload" accept=".jpg" type="file" name="file" th:attr="data-url=@{'/file/upload/temp'}" multiple="multiple" >
                            <input id="removefile" accept=".jpg" type="file" name="file" th:attr="data-url=@{'/file/upload/temp'}" multiple="multiple" >
                        </div>

                        <div class="pending-pictures" id="pendingPictures">
                            <div class="carousel slide" id="carousel3">
                                <div class="review-images" id="reviewImages">
                                    <ul id="reviewImagesList" class="clearfix">
                                        <!-- 任务图片 -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    <div class="task-process">
                        <div class="taskprocess-info" id="taskProcessInfo">
                            <div class="VivaTimeline" id="VivaTimeline">
                                <!-- 流程信息 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 按钮区 -->
        <div class="buttons">
            <input class="btn btn-primary pull-right save" id="save" type="button" value="保存"    data-toggle="modal" data-target="#myModal">
            <input class="btn btn-primary pull-right submit" id="submit" type="button" value="提交">
        </div>
    </div>
    <!-- 基本业务数据模板 -->
    <script type="text/template" id="handleBasicInformationTpl">
        <table>
            {{if processRule != null}}
            <tbody>
            <tr>
                <td>
                    <p class="heading"><span>设备编号</span>&nbsp;: </p>
                    <input id="deviceId" name="{{currentOrganizationTeamId}}" class="nowrite" type="text" value="{{subTaskBusinessData.deviceId}}" readonly>
                </td>
                <td colspan="2">
                    <p class="heading"><span>设备类型</span>&nbsp;:</p>
                    <input name="" class="nowrite" type="text" value="{{deviceTypeName}}" readonly>
                </td>
                <td colspan="3">
                    <p class="heading"><span>设备位置</span>&nbsp;:</p>
                    <input id="deviceAddrs" class="nowrite" type="text" value="{{deviceAddrs}}" readonly>
                </td>
            </tr>
            <tr>
                <td>
                    <p class="heading"><span>经度</span>&nbsp;:</p>
                    <input id="longitude" name="" class="" type="number" value="{{subTaskBusinessData.longitude}}" >
                </td>
                <td>
                    <p class="heading"><span>纬度</span>&nbsp;:</p>
                    <input id="latitude" name="" class="" type="number" value="{{subTaskBusinessData.latitude}}" >
                </td>
                {{if processRule.additionalBusinessId == 4}}
                <td>
                    <p class="heading"><span>获取方式</span>&nbsp;:</p>
                    {{if subTaskBusinessData.acquisitionMode}}
                    <select id = "acquisitionMode" class="heading">
                        <option value="true">蓝牙</option>
                        <option value="false">WIFI</option>
                    </select>
                    {{else}}
                    <select id = "acquisitionMode" class="heading">
                        <option value="false">WIFI</option>
                        <option value="true">蓝牙</option>
                    </select>
                    {{/if}}
                </td>
                <td>
                    <span class="heading">RSRP&nbsp;:</span>
                    <input id="rsrp" name="" class="" type="text" value="{{subTaskBusinessData.rsrp}}" >
                </td>
                <td>
                    <span class="heading">CELLID&nbsp;:</span>
                    <input id="cellid" name="" class="" type="text" value="{{subTaskBusinessData.cellid}}" >
                </td>
                <td>
                    <span class="heading">SINR&nbsp;:</span>
                    <input id="sinr" name="" class="" type="text" value="{{subTaskBusinessData.sinr}}" >
                </td>
                {{else if processRule.additionalBusinessId == 5}}
                <td>
                    <p class="heading"><span>获取方式</span>&nbsp;:</p>
                    {{if subTaskBusinessData.acquisitionMode}}
                    <select id = "acquisitionMode" class="heading">
                        <option value="true">蓝牙</option>
                        <option value="false">WIFI</option>
                    </select>
                    {{else}}
                    <select id = "acquisitionMode" class="heading">
                        <option value="false">WIFI</option>
                        <option value="true">蓝牙</option>
                    </select>
                    {{/if}}
                </td>
                <td>
                    <span class="heading">RSRP&nbsp;:</span>
                    <input id="rsrp" name="" class="" type="text" value="{{subTaskBusinessData.rsrp}}" >
                </td>
                <td>
                    <span class="heading">CELLID&nbsp;:</span>
                    <input id="cellid" name="" class="" type="text" value="{{subTaskBusinessData.cellid}}" >
                </td>
                <td>
                    <span class="heading">SINR&nbsp;:</span>
                    <input id="sinr"name="" class="" type="text" value="{{subTaskBusinessData.sinr}}" >
                </td>
                {{/if}}
            </tr>
            <tr>
                {{if processRule.additionalBusinessId == 1}}
                <td>
                    <p class="heading"><span>具备安装</span>&nbsp;:</p>
                    {{if subTaskBusinessData.install}}
                    <select id = "install" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "install" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                <td colspan="3">
                    <p class="heading"><span>原因</span>&nbsp;:</p>
                    <input id="installDesc" name="" class="" type="text" value="{{subTaskBusinessData.isInstallDesc}}" >
                </td>
                {{else if processRule.additionalBusinessId == 4}}
                <td>
                    <p class="heading"><span>具备安装</span>&nbsp;:</p>
                    {{if subTaskBusinessData.install}}
                    <select id = "install" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "install" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                <td colspan="3">
                    <p class="heading"><span>原因</span>&nbsp;:</p>
                    <input id="installDesc" class="" type="text" value="{{subTaskBusinessData.isInstallDesc}}" >
                </td>
                {{else if processRule.additionalBusinessId == 7}}
                <td>
                    <p class="heading"><span>具备安装</span>&nbsp;:</p>
                    {{if subTaskBusinessData.install}}
                    <select id = "install" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "install" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                <td colspan="3">
                    <p class="heading"><span>原因</span>&nbsp;:</p>
                    <input id="installDesc" class="" type="text" value="{{subTaskBusinessData.isInstallDesc}}" >
                </td>
                {{/if}}
            </tr>
            <tr>
                {{if processRule.additionalBusinessId == 3}}
                <td colspan="2">
                    <p class="heading"><span>故障原因</span>&nbsp;:</p>
                    <input id="faultReason" name="" class="" type="text" value="{{subTaskBusinessData.faultReason}}" >
                </td>

                <td colspan="2">
                    <p class="heading"><span>故障描述</span>&nbsp;:</p>
                    <input id="faultDesc" name="" class="" type="text" value="{{subTaskBusinessData.faultDesc}}" >
                </td>

                <td>
                    <p class="heading"><span>是否恢复</span>&nbsp;:</p>
                    {{if subTaskBusinessData.recove}}
                    <select id = "recove" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "recove" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                {{else if processRule.additionalBusinessId == 6}}
                <td colspan="2">
                    <p class="heading"><span>故障原因</span>&nbsp;:</p>
                    <input id="faultReason" class="" type="text" value="{{subTaskBusinessData.faultReason}}" >
                </td>
                <td colspan="2">
                    <p class="heading"><span>故障描述</span>&nbsp;:</p>
                    <input id="faultDesc" class="" type="text" value="{{subTaskBusinessData.faultDesc}}" >
                </td>
                <td>
                    <p class="heading"><span>是否恢复</span>&nbsp;:</p>
                    {{if subTaskBusinessData.recove}}
                    <select id = "recove" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "recove" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                {{else if processRule.additionalBusinessId == 9}}
                <td colspan="2">
                    <p class="heading"><span>故障原因</span>&nbsp;:</p>
                    <input id="faultReason" class="" type="text" value="{{subTaskBusinessData.faultReason}}" >
                </td>
                <td colspan="2">
                    <p class="heading"><span>故障描述</span>&nbsp;:</p>
                    <input id="faultDesc" class="" type="text" value="{{subTaskBusinessData.faultDesc}}" >
                </td>
                <td>
                    <p class="heading"><span>是否恢复</span>&nbsp;:</p>
                    {{if subTaskBusinessData.recove}}
                    <select id = "recove" class="heading">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                    {{else}}
                    <select id = "recove" class="heading">
                        <option value="false">否</option>
                        <option value="true">是</option>
                    </select>
                    {{/if}}
                </td>
                {{/if}}
            </tr>
            <tr>
                <td colspan="9">
                    <p class="heading"><span>备注</span>&nbsp;:</p>
                    <div id="description" class="remarks" >{{description}}</div>
                </td>
            </tr>
            <tr>
                <td colspan="9">
                    <p class="heading"><span>施工备注</span>&nbsp;:</p>
                    {{if subTaskState == 3}}
                    <div id="proDescription" class="remarks" contenteditable="true" >{{subTaskProcessInfoList[0].description}}</div>
                    {{else}}
                        {{if subTaskProcessInfoList.length>1}}
                        <div id="proDescription" class="remarks" contenteditable="true" >{{subTaskProcessInfoList[1].description}}</div>
                        {{else}}
                        <div id="proDescription" class="remarks" contenteditable="true" >{{subTaskProcessInfoList[0].description}}</div>
                        {{/if}}
                    {{/if}}
                </td>
            </tr>
            </tbody>
            {{else}}
            <tbody>
            <tr>
                <td>流程规则异常</td>
            </tr>
            </tbody>
            {{/if}}
        </table>
    </script>
    <!-- 任务流程信息模板 -->
    <script type="text/template" id="taskProcessInfoTpl">
        <dl>
            {{each subTaskProcessInfoList}}
            {{if $value.processName == '施工'}}
            <!-- <dt>Feb 2016</dt> -->
            <dd class="pos-left clearfix">
                <div class="circ"></div>
                <!-- <div class="time">{{$value.updateTime}}</div> -->
                <div class="events">
                    <div class="events-header">
                        <div class="events-headerName">
                            <p>任务名称：{{subTaskName}}，{{$value.processName}}</p>
                            <p>{{$value.updateTime}}</p>
                        </div>
                    </div>
                    <div class="events-body">
                        <div class="row">
                            <div class="events-desc">
                                <div class="txt">
                                    <span>任务状态</span>：
                                    <!--{{if $value.processState == 0}}-->
                                    <!--施工中-->
                                    <!--{{else if $value.processState == 1}}-->
                                    <!--审核中-->
                                    <!--{{else if $value.processState == 2}}-->
                                    <!--施工完成-->
                                    <!--{{else if $value.processState == 3}}-->
                                    <!--审核通过-->
                                    <!--{{else if $value.processState == 4}}-->
                                    <!--审核驳回-->
                                    <!--{{/if}}-->
                                    {{if $value.processState == 0}}
                                    未处理
                                    {{else if $value.processState == 1}}
                                    处理完成
                                    {{else if $value.processState == 2}}
                                    未审核
                                    {{else if $value.processState == 3}}
                                    审核驳回
                                    {{else if $value.processState == 4}}
                                    待整改
                                    {{else if $value.processState == 5}}
                                    整改完成
                                    {{else if $value.processState == 6}}
                                    审核通过
                                    {{else if $value.processState == 7}}
                                    已完成
                                    {{/if}}
                                </div>
                                <div class="txt">
                                            <span>{{$value.processName}}人
                                            {{if $value.uiInputName == ''}}
                                            </span>：&nbsp;{{$value.operatorName}}
                                    {{else}}
                                    </span>：&nbsp;{{$value.uiInputName}}
                                    {{/if}}
                                </div>
                                <div class="txt"><span>备注</span>：&nbsp;{{$value.description}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </dd>
            {{else if $value.processName == '审核'}}
            <dd class="pos-right clearfix">
                <div class="circ"></div>
                <!-- <div class="time">{{$value.updateTime}}</div> -->
                <div class="events">
                    <div class="events-header">
                        <div class="events-headerName">
                            <p>任务名称：{{subTaskName}}，{{$value.processName}}</p>
                            <p>{{$value.updateTime}}</p>
                        </div>
                    </div>
                    <div class="events-body">
                        <div class="row">
                            <div class="events-desc">
                                <div class="txt">
                                    <span>任务状态</span>：
                                    <!--{{if $value.processState == 0}}-->
                                    <!--施工中-->
                                    <!--{{else if $value.processState == 1}}-->
                                    <!--审核中-->
                                    <!--{{else if $value.processState == 2}}-->
                                    <!--施工完成-->
                                    <!--{{else if $value.processState == 3}}-->
                                    <!--审核通过-->
                                    <!--{{else if $value.processState == 4}}-->
                                    <!--审核驳回-->
                                    <!--{{/if}}-->
                                    {{if $value.processState == 0}}
                                    未处理
                                    {{else if $value.processState == 1}}
                                    处理完成
                                    {{else if $value.processState == 2}}
                                    未审核
                                    {{else if $value.processState == 3}}
                                    审核驳回
                                    {{else if $value.processState == 4}}
                                    待整改
                                    {{else if $value.processState == 5}}
                                    整改完成
                                    {{else if $value.processState == 6}}
                                    审核通过
                                    {{else if $value.processState == 7}}
                                    已完成
                                    {{/if}}
                                </div>
                                <div class="txt">
                                    <span>{{$value.processName}}人</span>：&nbsp;{{$value.operatorName}}
                                </div>
                                <div class="txt"><span>备注</span>：&nbsp;{{$value.description}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </dd>
            {{/if}}
            {{/each}}
        </dl>
    </script>
    <script th:src="@{/assets/viewer/viewer.js}"></script>
    <script th:src="@{/assets/jquery.eeyellow.Timeline/jquery.eeyellow.Timeline.js}"></script>
    <script th:src="@{/js/assignmentGrop/handle.js}"></script>
    <script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
    <script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
    <script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}"></script>
    <script>
        //上传图片
        function appFile(){

            var upFiles = $(".upfile");
            console.log(1);
            //获取选择的 img.attr
            upFiles.each(function(index,element){
                console.log(2);
            });
            $('#fileupload').click();
        }
        var i = 1;
        var NewStr = '';
        $('#fileupload').fileupload({
            singleFileUploads : false,
            dataType : 'json',
            done : function(e, data) {
                if (data.result.code == 1) {
                    var uploadFiles = data.result.data;

                    console.log(uploadFiles);
                    uploadFiles.forEach(function (filepath) {
                        var nowImgNum = $(".checkImg").length;
                        if(nowImgNum < proRuleDes.length){
                            NewStr = '<li id = '+ i +'>' +
                                '<div class="imgs">' +
                                '<img id="newImage" qualified = "0" class = "checkImg" data-original="' + filepath.downPath + '" src="' + filepath.downPath + '" data-id=" " qualified="0" >' +
                                '</div>' +
                                '<div class="imgDescription">' + proRuleDes[nowImgNum] + '</div>' +
                                '<div>'+
                                '<a  class="delfileButton" delPath = "'+ i + '" style="color:#FF0000" onclick="deleteImg(this)">&nbsp;[删除]</a>'+
                                '</div>' +
                                '</li>';
                        }
                        else{
                            if(imgnum != 0){
                                toastr.error("上传图片数量不得超过示例图片数量！");
                                return;
                            }
                            else{
                                var num = nowImgNum - proRuleDes.length + 1;
                                NewStr = '<li id = '+ i +'>' +
                                    '<div class="imgs">' +
                                        '<img id="newImage" class = "checkImg" data-original="' + filepath.downPath + '" src="' + filepath.downPath + '" data-id=" " qualified="0" >' +
                                    '</div>' +
                                    '<div class="imgDescription">' + $("#deviceId").val() + "_" + num  + '</div>' +
                                    '<div>'+
                                        '<a  class="delfileButton" delPath = "'+ i + '" style="color:#FF0000" onclick="deleteImg(this)">&nbsp;[删除]</a>'+
                                    '</div>' +

                                    '</li>';
                            }
                        }
                        $("#reviewImagesList").append(NewStr);
                        var a = $(".checkImg").length;
                        console.log(uploadFiles.length);
                        console.log($(".checkImg").length);
                        if(imgnum == 0){
                            var numStr = '<a class="text" style="color:#000000">可上传任意数量图片，已上传'+ a +'张图片。</a>';
                        }
                        else{
                            var numStr = '<a class="text" style="color:#000000">可上传' + imgnum + '张图片，已上传'+ a +'张图片。</a>';
                        }
                        $("#number").html(numStr);

                        // 审核图片查看
                        $('#reviewImagesList').viewer({
                            deleteId:false
                        });
                        i++;
                    });
                } else {
                    console.log(data.result.data);
                }
            },
            success: function (e, data) {
                console.log(111);

            }
        });

        //替换图片
        var rurl ='';
        function removeImg(obj) {
            var number = "Img" + $(obj).attr("delPath");
            var delPath = $("#"+number).attr("data-original");
            console.log(delPath);
            var upFiles = $(".upfile");
            console.log(1);
            //获取选择的 img.attr
            upFiles.each(function (index, element) {
                console.log(2);
            });
            //$('#removefile').click();
            $('input[id=removefile]').click();
            $('#removefile').fileupload({
                singleFileUploads : true,
                dataType : 'json',
                done : function(e, data) {
                    console.log(1);
                    if (data.result.code == 1) {
                        console.log(data);
                        rurl = data.result.data[0].downPath;

                        $("#"+number).attr("data-original", rurl);
                        $("#"+number).attr("src", rurl);
                        if($("#"+number).attr("qualified") == 3){
                            $("#"+number).attr("qualified",0);
                        }
                    } else {
                        console.log(data.result.data);
                    }
                },
            });
        }



        function deleteImg(obj){
            var url = $(obj).attr('delPath');
            $("#"+url).remove("");
            a=$(".checkImg").length;
            if(imgnum == 0){
                var numStr = '<a class="text" style="color:#000000">可上传任意数量图片，已上传'+ a +'张图片。</a>';
            }
            else{
                var numStr = '<a class="text" style="color:#000000">可上传' + imgnum + '张图片，已上传'+ a +'张图片。</a>';
            }
            $("#number").html(numStr);
        }
    </script>
</div>
</body>
</html>